<template>
	<view class="w-100">
		<view class="flex-1 bg-white head-style fixed-top">
			<view class="flex-1" :style="'height:' + statusBarHeight + 'px;'"></view>
			<view class="flex-1 head-scroll row-ac">
				<view class="flex-1 ml-3">
					<scroll-view scroll-x class="scroll-row">
						<view class="scroll-row-item tab-item" v-for="(item,index) in tabList" :key="index"
							@click="tabarCate(item, index)" :class="{active : tabIndex == index}">
							<view class="row-a-j-fc">
								<view class="cate-name">{{ item.name }}</view>
								<view class="cate-line"></view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="row-a-j-fc mr-5" @click="navTo('/pages/tabar/release')">
					<view class="iconfont icon-delt2-01 " style="font-size: 22px;"></view>
					<view class="font-s-2">发布</view>
				</view>
			</view>
		</view>
		<view class="w-100" :style="'height:' + headHeight + 'px;'"></view>
		<view class="w-100">
			<view class="flex-1" style="height: 2px;background-color: #f6f6f6;"></view>
			<scroll-view scroll-y class="flex-1" :style="'height:' + scrollHeight + 'px;'"
				@scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper">
				<view class="flex-1 py-2 bg-white mb-2 article-list" v-for="(item,index) in articleList" :key="index"
					@click="toArticle(item.id)">
					<view class="flex-1 mx-2">
						<view class="flex-1 row-ac-sb">
							<view class="row-ac">
								<view class="user-headimg">
									<image :src="item.user_headimage" mode=""></image>
								</view>
								<view class="ml-2">
									<view class="font-s-45">{{ item.user_nickname }}</view>
									<view class="font-s-3 mt-1 text-light-grey">{{ item.create_time }}</view>
								</view>
							</view>
							<view class="follow-box row font-s-2" :class="{ 'bg-color': item.is_following }"
								v-if="item.user !== user_id">
								<view v-if="item.is_following" @click.stop="cancelFollow(item.follow_id)">已关注</view>
								<view v-else @click.stop="getFollow(item.user)"><text
										class="iconfont icon-jiahao"></text>关注
								</view>
							</view>
						</view>
						<view class="article-title font-s-45 mx-2 mt-1 in2line font-w-600">{{ item.title }}</view>
						<view class="mt font-s-4 mx-2 in3line article-describe"
							v-html="formatDescription(item.describe)">
						</view>
						<view class="flex-1 mt-2 mx-2" v-if="item.image_list.length > 0">
							<view class="flex-1" v-if="item.image_list.length == 1">
								<view class="one-picture" v-for="(item1, index1) in item.image_list">
									<image class="flex-1" :src="item1.url" mode="widthFix"></image>
								</view>
							</view>
							<view class="flex-1 row-ac-fw" v-if="item.image_list.length == 2">
								<view class="many-picture" v-for="(item1, index1) in item.image_list" :key="index1">
									<image :src="item1.url" mode="aspectFill"></image>
								</view>
							</view>
							<view class="flex-1 row-ac-fw" v-if="item.image_list.length > 2">
								<view class="many-picture" v-for="(item1, index1) in item.image_list" :key="index1">
									<image :src="item1.url" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="flex-1 py-1 row-ac font-s-2 text-muted">
							<view>点赞<text class="ml">{{ item.likes_count }}</text></view>
							<view class="ml-4">收藏<text class="ml">{{ item.collect_count }}</text></view>
							<view class="ml-4">评论<text class="ml">{{ item.comment_count }}</text></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var Contacts
	import {
		articlecategoryTreeUrl,
		articleListUrl
	} from '@/api/article.js'
	import {
		yearMonthTime
	} from '@/utils/time.js';
	import {
		appversionDetailUrl,
		followDeleteUrl,
		followCreateUrl,
		userInfoUrl,
	} from '@/api/index';
	import {
		checkUpdate
	} from "@/components/update/js/app-update-check.js";
	import commonPreviewImg from '@/components/common/common-preview-img';
	export default {
		components: {
			commonPreviewImg
		},
		data() {
			return {
				statusBarHeight: '',
				scrollHeight: '',
				categoryTree: [],
				tabIndex: 1,
				tabList: [{
						id: 1,
						name: '关注'
					},
					{
						id: 2,
						name: '推荐'
					},
					{
						id: 3,
						name: '图文'
					}
				],
				queryInfo: {
					page: 1,
					page_size: 10
				},
				formFollow: {
					following: ''
				},
				articleList: [],
				articleTotal: '',
				loginStatus: false,
				user_id: ''
			}
		},
		computed: {
			headHeight() {
				return this.statusBarHeight + 43;
			}
		},
		mounted() {
			this.getContacts()
		},
		onLoad() {
			this.init()
		},
		onTabItemTap() {
			this.init()
		},
		created() {
			this.$getScreenInfo().then(res => {
				this.statusBarHeight = res.statusBarHeight + 12
				this.scrollHeight = res.windowHeight - this.statusBarHeight - 45
			})
			uni.getNetworkType({
				success: res => {
					if (res.networkType == 'wifi') {
						this.getAppInfo(1);
					}
				}
			})
		},
		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			init() {
				this.getArticlecategoryTree()
				this.getArticleList()
				this.token = uni.getStorageSync('token')
				if (this.token != '') {
					this.loginStatus = true
					this.getUserInfo()
				} else {
					this.loginStatus = false
					this.userInfo = ''
				}
			},
			getArticlecategoryTree() {
				this.$R.get(articlecategoryTreeUrl).then(res => {
					if (res.code == 200) {
						this.categoryTree = [{
							id: 0,
							name: '推荐',
						}, ...res.data]
					}
				})
			},
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.user_id = res.data.id
					console.log(this.user_id);
				})
			},
			getArticleList() {
				this.$R.get(articleListUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.articleList = res.data.list
						this.articleTotal = res.data.total
						this.articleList = res.data.list.map(item => {
							item.create_time = yearMonthTime(item.create_time); // 格式化时间
							return item;
						});
					}
				})
			},
			scrolltolower() {
				// 触底事件
				if (this.articleTotal != this.articleList.length) {
					this.queryInfo.page_size += 10;
					this.getArticleList()
				}
			},
			scrolltoupper() {
				this.getArticleList()
			},
			tabarCate(item, index) {
				this.tabIndex = index
			},
			toArticle(articleId) {
				uni.navigateTo({
					url: '/pages/article/article-text?articleId=' + articleId,
				})
			},
			getFollow(userId) {
				if (this.loginStatus) {
					this.formFollow.following = userId
					const articleIndex = this.articleList.findIndex(item => item.user === userId)
					if (articleIndex !== -1) {
						this.articleList[articleIndex].is_following = true
					}
					uni.showToast({
						title: '关注成功',
						icon: 'none'
					});
					this.$R.post(followCreateUrl, this.formFollow).then(res => {
						if (res.code == 200) {
							this.getArticleList()
						}
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
				}
			},
			cancelFollow(followId) {
				this.$R.delete(followDeleteUrl + followId + '/').then(res => {
					if (res.code == 200) {
						this.getArticleList()
						uni.showToast({
							title: '取消关注',
							icon: 'none'
						});
					}
				})
			},
			formatDescription(description) {
				// 匹配@后面的内容，并用span标签包裹起来，并设置样式
				let formattedDescription = description.replace(/@(\w+)/g, '<span style="color:#108ED4;">@$1</span>');
				return formattedDescription;
			},
			getAppInfo(type) {
				const system_info = uni.getSystemInfoSync();
				let params = {
					os: system_info.platform //本机设备操作系统  （android || ios） 
				}
				if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false
				//请求获取最新版本
				setTimeout(() => {
					this.$R.get(appversionDetailUrl + 1 + '/').then(req => {
						let update_info = {
							version: req.data.version, //线上版本
							now_url: req.data.app_url, //更新链接
							silent: 0, //是否是静默更新
							force: req.data.force, //是否是强制更新
							net_check: 1, //非WIfi是否提示
							note: req.data.note, //更新内容
						}
						checkUpdate(update_info, type).then(res => {
							if (res.msg) {
								plus.nativeUI.toast(res.msg);
							}
						});
					}, 200)
				})
			},
			getContacts: function() {
				var _this = this;
				plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) {
					addressbook.find(["displayName", "phoneNumbers"], function(contacts) {
						_this.contactsList = contacts;
					}, function() {}, {
						multiple: true
					});
				}, function(e) {});
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.head-style {
		.iconfont {
			font-size: 38rpx;
		}

		.head-scroll {
			height: 43px;
		}

		.tab-item {
			display: inline-block !important;
			margin: 0 20rpx;
			height: 43px;

			.cate-name {
				font-size: 42rpx;
				height: 30px;
				color: #535353;
				font-weight: 400;
				margin-bottom: 5px;
			}

			.cate-line {
				width: 43rpx;
				height: 12rpx;
				border-radius: 6rpx;

			}
		}

		.active .cate-name {
			font-size: 48rpx;
			font-weight: 600;
		}

		.active .cate-line {
			background-color: #E45825;
		}
	}

	.article-list {
		.user-headimg {
			width: 78rpx;
			height: 78rpx;
			border-radius: 50%;

			image {
				width: 78rpx;
				height: 78rpx;
				border-radius: 50%;
			}
		}

		.follow-box {
			width: 106rpx;
			height: 40rpx;
			border-radius: 20rpx;
			border: 1rpx solid #E45825;
			color: #E45825;

			.iconfont {
				font-size: 18rpx;
				margin-right: 8rpx;
			}
		}

		.article-title {
			font-size: 31rpx;
		}

		.article-describe {
			line-height: 1.6;
			color: #575757;
		}

		.one-picture {
			width: 55%;
		}

		.two-picture {
			width: 236rpx;
			height: 204rpx;
			border-radius: 10rpx;
			margin-right: 16rpx;
		}

		.many-picture {
			width: 216rpx;
			height: 216rpx;
			border-radius: 10rpx;
			margin-right: 11rpx;
			margin-bottom: 11rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
</style>